<template>
  <main class="drg-page">
    <c-card title="超支结余趋势" class="overspend">
      <div class="left">
        <num-card v-for="item in overspendData"
                  :key="item.key"
                  :title="item.title"
                  :value="item.value"
                  :unit="item.unit"
                  :value-size="28"
                  :unit-size="12"
                  :color="item.color"/>
      </div>
      <div class="right">
        <c-bar :barData="overspendBarData" v-if="overspendBarData.xAxis.length"/>
      </div>
    </c-card>
    <card-wrapper class="surplus">
      <c-card slot="left" title="科室超支结余分布" :clickMore="clickMore" :height="280">
        <div class="pieDiv">
          <c-pie :pieData="surplusPieData"  :pieTitle="'科室'"  v-if="surplusPieMount"/>
        </div>
        <c-arrange-rate :arrangeData="surplusArrange"/>
      </c-card>
      <c-card slot="right" title="病组超支结余分布" :clickMore="clickMore" :height="280">
        <div class="pieDiv">
          <c-pie :pieData="surplusGroupPieData" :pieTitle="'病组'" v-if="surplusGroupPieMount"/>
        </div>
        <c-arrange-num :arrangeData="surplusGroupArrange" />
      </c-card>
    </card-wrapper>
    <card-wrapper>
      <c-card slot="left" title="控费方向监测" :clickMore="clickMore" class="control" :height="370">
        <div class="top">
          <cost-card/>
          <cost-card bgColor="#FFAA47"/>
          <cost-card bgColor="#33CD67"/>
        </div>
        <div class="bottom">
          <c-bar-multi :barData="controlBarData" v-if="controlBarData.xAxis.length"/>
        </div>
      </c-card>
      <c-card slot="right" title="优势病组" :clickMore="clickMore" :height="370">
        <card-wrapper>
          <c-bar-title slot="left" :title="`优势病历占全院DIP病历 | 同比：${advantageLeftRate}`" :barData="advantageLeftBar"
                       v-if="advantageLeftBar.xAxis.length"/>
          <c-bar-title slot="right" :title="`优势病组总结余 | 同比：${advantageRightRate}`" :barData="advantageRightBar"
                       v-if="advantageRightBar.xAxis.length"/>
        </card-wrapper>
      </c-card>
    </card-wrapper>
  </main>
</template>

<script>
import CPie from "@/components/cPie.vue"
import cBar from "@/components/cBar";
import cBarMulti from "@/components/cBarMulti";
import cBarTitle from "@/components/cBarTitle";
import numCard from "../numCard.vue"
import cArrangeRate from "@/components/cArrangeRate";
import cArrangeNum from "@/components/cArrangeNum";
import costCard from "../costCard";
import {
  overrunsSurplusTrendChart,
  overrunsSurplusTrend,
  departmentOverrunsSurplusChart,
  departmentOverrunsTop5,
  diseaseOverrunsSurplusChart,
  diseaseOverrunsTop5,
  selectControlFeeDirectionChart,
  selectSurplusDiseaseGroupSum,
  selectSurplusDiseaseGroupSurplusSum
} from "@/api/drgsGroupResults.js";
import {formatNumber, calcBasis, calcBasisIncrease} from '@/utils/transform';
import moment from "moment";

export default {
  components: {CPie, numCard, cBar, cArrangeRate, cArrangeNum, costCard, cBarMulti, cBarTitle},
  props: {
    timeParams: {
      type: Object
    }
  },
  watch: {
    timeParams() {
      this.reGetData();
    }
  },
  data() {
    return {
      overspendData: [
        {value: "", key: "setmoneycounts", title: "DIP结算金额", unit: '万元', color: "#484D78"},
        {value: "", key: "moneycounts", title: "DIP医疗总费用", unit: '万元', color: "#484D78"},
        {value: "", key: "proportion", title: "拨付比", unit: '万元', color: "#484D78"},
        {value: "", key: "surplus", title: "结余", unit: '万元', color: "#E00703"},
      ],
      overspendBarData: {
        xAxis: [],
        surplus: [],
        proportion: [],
      },
      surplusPieMount:false,
      surplusPieData: {
        CountNumber: 0,
        OverrunsNumber: 0,
        SurplusNumber: 0
      },
      surplusGroupPieMount:false,
      surplusGroupPieData: {
        CountNumber: 0,
        OverrunsNumber: 0,
        SurplusNumber: 0,
      },
      surplusArrange: [],
      surplusGroupArrange: [],
      controlBarData: {
        xAxis: [],
        dataList: []
      },
      advantageLeftBar: {
        xAxis: [],
        dataList: [],
      },
      advantageLeftRate: "",
      advantageRightBar: {
        xAxis: [],
        dataList: [],
      },
      advantageRightRate: ""
    }
  },
  created() {
    this.reGetData();
  },
  methods: {
    clickMore() {

    },
    reGetData() {
      this.getOverrunsSurplusTrend();
      this.getOverrunsSurplusTrendChart();
      this.getDepartmentOverrunsSurplusChart();
      this.getDepartmentOverrunsTop5();
      this.getDiseaseOverrunsSurplusChart();
      this.getDiseaseOverrunsTop5();
      this.getSelectControlFeeDirectionChart();
      this.getSelectSurplusDiseaseGroupSum();
      this.getSelectSurplusDiseaseGroupSurplusSum();
    },
    async getOverrunsSurplusTrend() {
      const params = {
        ...this.timeParams
      }
      const res = await overrunsSurplusTrend(params)
      for (const item of this.overspendData) {
        item.value = formatNumber(res['data'][item.key]);
      }
    },
    async getOverrunsSurplusTrendChart() {
      const params = {
        ...this.timeParams
      }
      this.overspendBarData.xAxis = [];
      const res = await overrunsSurplusTrendChart(params);
      if (res['data']) {
        for (const key in this.overspendBarData) {
          this.overspendBarData[key] = [];
        }
        res['data']['retunrList'].forEach(item => {
          this.overspendBarData.xAxis.push(item.months);
          this.overspendBarData.surplus.push(item.surplus);
          this.overspendBarData.proportion.push(item.proportion);
        });
      }
    },
    async getDepartmentOverrunsSurplusChart() {
      const params = {
        ...this.timeParams
      };
      this.surplusPieMount = false;
      const res = await departmentOverrunsSurplusChart(params);
      this.surplusPieData = res['data']['data'];
      this.surplusPieMount = Boolean(this.surplusPieData);
    },
    async getDepartmentOverrunsTop5() {
      const params = {
        ...this.timeParams,
        limitNum: 5,
      }
      const res = await departmentOverrunsTop5(params);
      if (res['data']) {
        this.surplusArrange = res['data']['data'];
      }
    },
    async getDiseaseOverrunsSurplusChart() {
      const params = {
        ...this.timeParams
      }
      this.surplusGroupPieMount = false;
      const res = await diseaseOverrunsSurplusChart(params);
      if (res['data']['data']) {
        this.surplusGroupPieData = res['data']['data'];
        this.surplusGroupPieMount = Boolean(this.surplusGroupPieData)
      }
    },
    async getDiseaseOverrunsTop5() {
      const params = {
        ...this.timeParams,
        limitNum: 5
      }
      const res = await diseaseOverrunsTop5(params);
      if (res['data']) {
        this.surplusGroupArrange = res['data']['data'];
      }
    },
    async getSelectControlFeeDirectionChart() {
      const params = {
        ...this.timeParams
      }
      this.controlBarData.xAxis = [];
      const res = await selectControlFeeDirectionChart(params);
      if (res['data']) {
        this.controlBarData.dataList = [];
        this.controlBarData.xAxis = res['data']['retunrList'].map(item => item['months']);
        this.controlBarData.dataList = [
          {
            title: "次均药品费",
            data: res['data']['retunrList'].map(item => item['ave_drug']),
            color: "#5467E6"
          },
          {
            title: "次均材料费",
            data: res['data']['retunrList'].map(item => item['ave_material']),
            color: "#FF8D49"
          },
          {
            title: "次均其他费",
            data: res['data']['retunrList'].map(item => item['ave_other']),
            color: "#55EFD3"
          }
        ];
      }
    },
    async getSelectSurplusDiseaseGroupSum() {
      const params = {
        ...this.timeParams
      }
      this.advantageLeftBar.xAxis = [];
      const res = await selectSurplusDiseaseGroupSum(params);
      if (res['data']) {
        this.advantageLeftBar.xAxis = ['去年同期', moment(`${this.timeParams.year}-${this.timeParams.month}`).format('YYYY年MM月')]
        this.advantageLeftBar.dataList = [res['data']['oldSum'], res['data']['nowSum']]
        this.advantageLeftRate = calcBasisIncrease(res['data']['nowSum'], res['data']['oldSum']);
      }
    },
    async getSelectSurplusDiseaseGroupSurplusSum() {
      const params = {
        ...this.timeParams
      }
      this.advantageRightBar.xAxis = [];
      const res = await selectSurplusDiseaseGroupSurplusSum(params);
      if (res['data']) {
        this.advantageRightBar.xAxis = ['去年同期', moment(`${this.timeParams.year}-${this.timeParams.month}`).format('YYYY年MM月')]
        this.advantageRightBar.dataList = [res['data']['oldSum'], res['data']['nowSum']]
        this.advantageRightRate = calcBasisIncrease(res['data']['nowSum'], res['data']['oldSum']);

      }
    }
  }
}
</script>

<style scoped lang="stylus">
.drg-page {
  .overspend {
    .left {
      width 40%
      display flex
      flex-wrap wrap
      align-items center

      .num {
        border-radius: 8px;
        padding 15px 0 0 30px
        background-color #F5F7F9
        width 270px
        height 80px
      }

      .num:nth-child(-n+2) {
        margin-bottom 20px
      }

      .num:nth-child(odd) {
        margin-right 20px
      }
    }

    .right {
      width 60%
    }
  }

  .control {
    height 100%

    >>> .content {
      display flex
      flex-direction column
    }

    .top {
      display flex
      align-items center
      justify-content space-between
    }

    .bottom {
      padding-top 30px
      flex-grow 1
    }
  }
}

.surplus, .overspend {
  >>> .content {
    display flex
  }
}
  .pieDiv{ width:400px; height:200px;}
</style>
